<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-1">
        <div class="sticky" :style="'top: ' + topVal">
          <LeftComp :loading="artLoad"></LeftComp>
        </div>
      </div>
      <div class="col q-px-sm" v-if="!errFlag">
        <q-card flat v-if="!artLoad && articleVo">
          <div class="q-pa-md">
            <RouterLink v-for="item in articleVo.tagList" :key="item.id" :to="'/tag/' + item.id">
              <q-chip clickable class="cursor-pointer" square>
                <span class="text-caption">{{ item.name }}</span>
              </q-chip>
            </RouterLink>
            <RouterLink v-if="articleVo.topic" :to="'/topic/' + articleVo.topic.id">
              <q-chip clickable class="cursor-pointer text-primary">
                <span class="text-caption">#{{ articleVo.topic.name }}#</span>
              </q-chip>
            </RouterLink>
          </div>

          <div class="q-px-md text-h3">
            {{ articleVo.title }}
          </div>
          <div class="q-px-md q-pt-sm text-h6">
            {{ articleVo.summary }}
          </div>
          <div class="q-px-md q-py-sm row items-center">
            <q-btn dense flat size="sm">
              <div class="row q-gutter-xs">
                <q-icon color="gray-5" size="xs" name="article" />
                <div class="text-sm">{{ articleVo.totalWords }} 字</div>
              </div>
              <q-tooltip> 总字数 </q-tooltip>
            </q-btn>

            <q-btn dense flat size="sm">
              <div class="row q-gutter-xs">
                <q-icon color="gray-5" size="xs" name="access_time" />
                <div class="text-sm">{{ articleVo.readTime }}</div>
              </div>
              <q-tooltip> 阅读时长 </q-tooltip>
            </q-btn>

            <q-btn dense flat size="sm">
              <div class="row q-gutter-xs">
                <q-icon color="gray-5" size="xs" name="fa-regular fa-calendar" />

                <div class="text-sm">{{ articleVo.relativeTime }}</div>
              </div>
              <q-tooltip> 最后更新时间: {{ articleVo.updateTime }} </q-tooltip>
            </q-btn>

            <q-btn dense flat size="sm" :to="'/category/' + articleVo.category.id">
              <div class="row q-gutter-xs">
                <q-icon color="gray-5" size="xs" name="fa-solid fa-folder" />
                <div class="text-sm">{{ articleVo.category.name }}</div>
              </div>
              <q-tooltip> 分类 </q-tooltip>
            </q-btn>

            <q-btn dense flat size="sm">
              <div class="row q-gutter-xs">
                <q-icon color="gray-5" size="xs" name="remove_red_eye" />
                <div class="text-sm">{{ articleVo.readNum }}</div>
              </div>
              <q-tooltip> 阅读量 </q-tooltip>
            </q-btn>
          </div>
          <MdPreview
            class="q-px-md"
            :theme="$q.dark.isActive ? 'dark' : 'light'"
            :editorId="editId"
            :noImgZoomIn="true"
            v-viewer
            :modelValue="articleVo.content"
          />
        </q-card>

        <ArticleComment v-if="!artLoad"></ArticleComment>
        <q-card class="row justify-center items-center h-300px" v-if="artLoad" flat>
          <q-spinner color="primary" size="4em" />
        </q-card>
      </div>
      <div class="col q-py-sm q-px-sm" v-else>
        <q-card flat>
          <div class="h-300px row justify-center items-center">
            <div class="text-h5">哎呀，文章走丢了~~</div>
          </div>
        </q-card>
      </div>
      <div class="col-3">
        <div>
          <UserCard :loading="artLoad"></UserCard>
        </div>
        <div class="q-mt-sm"><HotTagCard></HotTagCard></div>
        <div class="sticky" :style="'top: ' + topVal">
          <div class="q-mt-sm">
            <q-card flat>
              <div class="text-lg q-px-sm">目录</div>
              <q-separator />
              <MdCatalog
                class="scroll"
                @active="
                  () => {
                    handleClog()
                  }
                "
                v-if="!artLoad"
                :editorId="editId"
                :scrollElement="scrollElement"
              />
            </q-card>
          </div>
          <div class="q-mt-sm">
            <RecommendArt :id="artId"></RecommendArt>
          </div>
        </div>
      </div>
    </div>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import ArticleComment from './ArticleComment.vue'
import HotTagCard from 'src/components/HotTagCard.vue'
import RecommendArt from 'src/components/RecommendArt.vue'
import UserCard from './UserCard.vue'
import LeftComp from './LeftComp.vue'
import { onMounted, watch } from 'vue'
import { useWebStore } from 'src/stores/webStore'
import { MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'
import { storeToRefs } from 'pinia'
import { articleId, articleVo, commentsNum } from './shared'
import { articleData } from 'src/service/api'
import useBoolean from 'src/use/useBoolean'
import { scroll, useQuasar } from 'quasar'

const $q = useQuasar()

const { bool: artLoad, setTrue: artLoadStart, setFalse: artLoadEnd } = useBoolean()

const { bool: errFlag, setTrue: errAction, setFalse: errDiss } = useBoolean()
const editId = 'preview-only'
const scrollElement = document.documentElement

const webStore = useWebStore()

const props = defineProps<{
  artId: string
}>()

watch(
  () => props.artId,
  (val) => {
    if (val) {
      articleId.value = val as string
      f5()
    }
  },
)

onMounted(() => {
  articleId.value = props.artId
  f5()
})

const { topVal } = storeToRefs(webStore)
const { getScrollTarget, setVerticalScrollPosition } = scroll

// 获取文章内容
const f5 = () => {
  artLoadStart()
  articleData({ id: articleId.value }).then(({ error, data }) => {
    artLoadEnd()
    if (!error) {
      errDiss()
      commentsNum.value = data.commentNum
      articleVo.value = data
    } else {
      errAction()
    }
  })
}

// 获取一个元素对象
function scrollToElement(el: HTMLElement) {
  const target = getScrollTarget(el)
  const offset = el.offsetTop - 150
  const duration = 500
  setVerticalScrollPosition(target, offset, duration)
}

const handleClog = () => {
  const activeEle = document.querySelector('.md-editor-catalog-active')
  if (activeEle) {
    scrollToElement(activeEle as HTMLElement)
  }
}
</script>

<style lang="scss" scoped>
.md-editor-catalog {
  max-height: 300px;
  overflow: auto;
}
</style>
